<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"
    />
    <title>拼多多热销合集</title>
    <link
      rel="stylesheet"
      href="https://at.alicdn.com/t/font_1534407_edyx096nc5c.css"
    />
    <link
      rel="stylesheet"
      href="https://cdn.staticfile.org/layer/2.3/skin/layer.css"
    />
    <script>
      eval(
        (function (p, a, c, k, e, r) {
          e = function (c) {
            return (
              (c < a ? "" : e(parseInt(c / a))) +
              ((c = c % a) > 35 ? String.fromCharCode(c + 29) : c.toString(36))
            );
          };
          if (!"".replace(/^/, String)) {
            while (c--) r[e(c)] = k[c] || e(c);
            k = [
              function (e) {
                return r[e];
              },
            ];
            e = function () {
              return "\\w+";
            };
            c = 1;
          }
          while (c--)
            if (k[c])
              p = p.replace(new RegExp("\\b" + e(c) + "\\b", "g"), k[c]);
          return p;
        })(
          ';(6(c,f){4 g=c.18;4 h=g.19;4 i=g.M("B[C=\\"N\\"]");4 j=g.M("B[C=\\"D\\"]");4 k=0;4 l=0;4 m;4 n=f.D||(f.D={});5(i){4 o=i.O("E").7(/F\\-A=([\\d\\.]+)/);5(o){l=8(o[1]);k=1a(1/l)}}9 5(j){4 p=j.O("E");5(p){4 q=p.7(/F\\-y=([\\d\\.]+)/);4 r=p.7(/P\\-y=([\\d\\.]+)/);5(q){k=8(q[1]);l=8((1/k).Q(2))}5(r){k=8(r[1]);l=8((1/k).Q(2))}}}5(!k&&!l){4 s=c.R.S.7(/1b/T);4 t=c.R.S.7(/1c/T);4 u=c.1d;5(t){5(u>=3&&(!k||k>=3)){k=3}9 5(u>=2&&(!k||k>=2)){k=2}9{k=1}}9{k=1}l=1/k}h.G("1e-y",k);5(!i){i=g.U("B");i.G("C","N");i.G("E","F-A="+l+", P-A="+l+", 1f-A="+l+", 1g-1h=1i");5(h.V){h.V.W(i)}9{4 v=g.U("1j");v.W(i);g.1k(v.1l)}}6 w(){4 a=h.1m().1n;5(a/k>X){a=X*k}4 b=a*0.1o;h.H.I=b+"z";n.x=c.x=b}c.J("1p",6(){Y(m);m=Z(w,10)},K);c.J("1q",6(e){5(e.1r){Y(m);m=Z(w,10)}},K);5(g.1s==="1t"){g.11.H.I=12*k+"z"}9{g.J("1u",6(e){g.11.H.I=12*k+"z"},K)}w();n.y=c.y=k;n.w=w;n.1v=6(d){4 a=8(d)*13.x;5(14 d==="15"&&d.7(/x$/)){a+="z"}16 a};n.1w=6(d){4 a=8(d)/13.x;5(14 d==="15"&&d.7(/z$/)){a+="x"}16 a}})(L,L["17"]||(L["17"]={}));',
          62,
          95,
          "||||var|if|function|match|parseFloat|else|||||||||||||||||||||||refreshRem|rem|dpr|px|scale|meta|name|flexible|content|initial|setAttribute|style|fontSize|addEventListener|false|window|querySelector|viewport|getAttribute|maximum|toFixed|navigator|appVersion|gi|createElement|firstElementChild|appendChild|540|clearTimeout|setTimeout|300|body||this|typeof|string|return|lib|document|documentElement|parseInt|android|iphone|devicePixelRatio|data|minimum|user|scalable|no|div|write|innerHTML|getBoundingClientRect|width|133334|resize|pageshow|persisted|readyState|compvare|DOMContentLoaded|rem2px|px2rem".split(
            "|"
          ),
          0,
          {}
        )
      );
    </script>
    <script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/vue/2.6.10/vue.min.js"></script>
    <script src="https://cdn.staticfile.org/vue-lazyload/1.3.3/vue-lazyload.js"></script>
    <script src="https://cdn.staticfile.org/layer/2.3/layer.js"></script>
    <script>
      var vmUrlSearchs = null;

      /**
       * @param msg {string}
       */
      function toast(msg) {
        layer.msg(msg, {
          time: 3000,
          shift: 5,
        });
      }

      function vmRequest(name) {
        if (!vmUrlSearchs) {
          vmUrlSearchs = new vmUrlSearch();
        }
        return vmUrlSearchs[name];
      }

      function vmUrlSearch() {
        var name, value;
        var str = location.href;
        var num = str.indexOf("?");
        str = str.substr(num + 1);
        var arr = str.split("&");
        for (var i = 0; i < arr.length; i++) {
          num = arr[i].indexOf("=");
          if (num > 0) {
            name = arr[i].substring(0, num);
            value = arr[i].substr(num + 1);
            this[name] = value;
          }
        }
      }

      /**
       * 判断是否已滚动到底部
       * @param el {HTMLElement}
       * @param direct {"vertical"|"horizontal"?}
       * @param offset {number?}
       * @returns {boolean}
       */
      function isScrollEnd(el, direct, offset) {
        if (direct === void 0) {
          direct = "vertical";
        }
        if (offset === void 0) {
          offset = 10;
        }
        var scrollTop = el.scrollTop;
        var scrollLeft = el.scrollLeft;
        var scrollHeight = el.scrollHeight;
        var scrollWidth = el.scrollWidth;
        var width = el.clientWidth;
        var height = el.clientHeight;
        if (el === window) {
          scrollTop =
            document.documentElement.scrollTop || document.body.scrollTop;
          scrollLeft =
            document.documentElement.scrollLeft || document.body.scrollLeft;
          scrollHeight =
            document.documentElement.scrollHeight || document.body.scrollHeight;
          scrollWidth =
            document.documentElement.scrollWidth || document.body.scrollWidth;
          width =
            document.documentElement.clientWidth || document.body.clientWidth;
          height =
            document.documentElement.clientHeight || document.body.clientHeight;
        }
        if (direct === "vertical") {
          return scrollTop >= scrollHeight - height - offset;
        } else {
          return scrollLeft >= scrollWidth - width - offset;
        }
      }

      var isDom = (function () {
        return typeof HTMLElement === "object"
          ? function (target) {
              return target instanceof HTMLElement;
            }
          : function (target) {
              return (
                target &&
                typeof target === "object" &&
                target.nodeType === 1 &&
                typeof target.nodeName === "string"
              );
            };
      })();

      /**
       * 手动添加img标签下载图片
       * @param url {string}
       * @returns {Promise}
       */
      function loadImg(url) {
        return new Promise(function (resolve, reject) {
          var img = document.createElement("img");
          var parent = document.body;
          img.style.display = "none";
          img.onload = function (ev) {
            parent.removeChild(img);
            resolve();
          };
          img.onabort = img.onerror = function (ev) {
            parent.removeChild(img);
            reject(ev);
          };
          img.src = url;
          parent.append(img);
        });
      }

      function select(element) {
        var selectedText;
        if (element.nodeName === "SELECT") {
          element.focus();
          selectedText = element.value;
        } else if (
          element.nodeName === "INPUT" ||
          element.nodeName === "TEXTAREA"
        ) {
          var isReadOnly = element.hasAttribute("readonly");
          if (!isReadOnly) {
            element.setAttribute("readonly", "");
          }
          element.select();
          element.setSelectionRange(0, element.value.length);
          if (!isReadOnly) {
            element.removeAttribute("readonly");
          }
          selectedText = element.value;
        } else {
          if (element.hasAttribute("contenteditable")) {
            element.focus();
          }
          var selection = window.getSelection();
          var range = document.createRange();
          range.selectNodeContents(element);
          selection.removeAllRanges();
          selection.addRange(range);
          selectedText = selection.toString();
        }
        return selectedText;
      }

      /**
       * 复制文字或html
       * @param element {HTMLElement | string}
       * @param successMsg {string?}
       * @param errorMsg {string?}
       * @param isFromCopy {boolean?}
       * @return {Promise}
       */
      function copy(element, successMsg, errorMsg, isFromCopy) {
        var isText = typeof element === "string";
        if (isText) {
          var text = element;
          element = document.createElement("div");
          element.innerText = text;
          element.style.position = "fixed";
          element.style.left = "-100000px";
          document.body.appendChild(element);
        }
        var p = new Promise(function (resolve, reject) {
          select(element);
          var succeeded;
          try {
            succeeded = document.execCommand("copy");
          } catch (err) {
            console.log(err);
            succeeded = false;
          }
          if (succeeded) {
            toast(successMsg || "复制成功!");
            resolve();
            return;
          }
          if (isFromCopy) {
            toast(errorMsg || "复制失败，请稍后重试!");
            reject();
            return;
          }
          layer.alert(
            "点击复制",
            {
              btn: "复制",
            },
            function () {
              copy(element, successMsg, errorMsg, true).then(resolve, reject);
            }
          );
        });
        p.finally(function () {
          window.getSelection().removeAllRanges();
          if (isText) {
            document.body.removeChild(element);
          }
        });
        return p;
      }

      /**
       * 复制文字
       * @param text {string}
       * @param successMsg {string?}
       */
      function copyText(text, successMsg) {
        return copy(text, successMsg);
      }

      /**
       * 复制html
       * @param targetNode {HTMLElement}
       * @param successMsg {string?}
       * @param repeat {boolean?}
       */
      function copyHtml(targetNode, successMsg, repeat) {
        return copy(targetNode, successMsg);
      }

      /**
       * 判断是否固定在顶部的条件
       * @param target {HTMLElement}
       * @param cb {Function}
       * @return {function(): void}
       */
      function isFixed(target, cb) {
        var container = window;

        function getScrollTop() {
          return document.documentElement.scrollTop || document.body.scrollTop;
        }

        var rect = target.getBoundingClientRect();
        var distanceTop = rect.top + getScrollTop();
        var handler;
        cb(getScrollTop() >= distanceTop);
        container.addEventListener(
          "scroll",
          (handler = function () {
            // 当滑动距离大于等于分类距离顶部位置时，则固定定位
            cb(getScrollTop() >= distanceTop);
          })
        );
        return function () {
          container.removeEventListener("scroll", handler);
        };
      }

      var bodyScrollTop = 0;
      var htmlScrollTop = 0;

      // 禁止滚动
      function noScroll() {
        var html = document.querySelector("html");
        var body = document.querySelector("body");
        // alert(html.scrollTop);
        bodyScrollTop = body.scrollTop;
        htmlScrollTop = html.scrollTop;
        html.style.marginTop = -(bodyScrollTop || htmlScrollTop) + "px";
        $(html).addClass("no-scroll");
        // addClass(body, "no-scroll");
      }

      // 清除禁止滚动
      function clearNoScroll() {
        var html = document.querySelector("html");
        var body = document.querySelector("body");
        $(html).removeClass("no-scroll");
        html.style.marginTop = "";
        body.scrollTop = bodyScrollTop;
        html.scrollTop = htmlScrollTop;
      }

      Vue.use(VueLazyload, {
        preLoad: 1.3,
        error: "http://img.bc.haodanku.com/haodanku/1595237918",
        loading:
          "http://img.bc.fqapps.com/fudai13cae4ae6ef16739ed3b100a2ec39e97.gif",
        attempt: 1,
      });
      var navStr =
        "0:全部，1:女装，2:男装，3:内衣，4:美妆，5:配饰，6:鞋品，7:箱包，8:儿童，9:母婴，10:居家，11:美食，12:数码，13:家电，14:其他，15:车品，16:文体，17:宠物";
      var navList = navStr.split("，").map(function (value) {
        var split = value.split(":");
        return { label: split[1], value: split[0] };
      });
      var CommonMixin = {
        el: "#free_app",
        data: function () {
          return {
            vmCid: vmRequest("cid"),
            hostLink: window.location,
            vmHttp: (function () {
              var protocol = window.location.protocol;
              protocol = protocol.substring(0, protocol.length - 1);
              return protocol.includes("http") ? protocol : "http";
            })(),
            listData: {
              list: [],
              loading: false,
              finished: false,
              min_id: 1,
            },
          };
        },
        created: function () {
          this.getListData();
        },
        mounted: function () {
          var that = this;
          window.addEventListener("scroll", function (ev) {
            if (isScrollEnd(this, "vertical", 40)) {
              that.getListData();
            }
          });
        },
        methods: {
          resetListData: function () {
            this.listData = {
              list: [],
              loading: false,
              finished: false,
              min_id: 1,
            };
          },
          getListDataParams: function (item) {
            throw new Error("需要使用了该mixins的组件实现listDataParams函数");
          },
          getListData: function () {
            throw new Error("需要使用了该mixins的组件实现getListData函数");
          },
          getTransferParams: function () {
            throw new Error("需要使用了该mixins的组件实现transferParams函数");
          },
          handleGoodsTransfer: function () {
            throw new Error(
              "需要使用了该mixins的组件实现handleGoodsTransfer函数"
            );
          },
          /**
           * 分享给好友
           */
          handleShare: function () {
            copyText(location.href, "复制成功，分享给身边好友吧~");
          },
        },
      };
    </script>
  </head>
  <body>
    <style>
      ul {
        list-style: none;
      }
      * {
        -webkit-tap-highlight-color: transparent;
        padding: 0;
        margin: 0;
      }
      body,
      html {
        background: #d00921;
        padding: 0;
        margin: 0;
      }
      .no-scroll {
        position: fixed;
        width: 100%;
        height: 100vh !important;
        overflow: hidden !important;
      }
      [v-cloak] {
        display: none;
      }
      @-webkit-keyframes turn {
        0% {
          -webkit-transform: rotate(0);
          transform: rotate(0);
        }
        to {
          -webkit-transform: rotate(1turn);
          transform: rotate(1turn);
        }
      }
      @-webkit-keyframes line-scale {
        0%,
        40%,
        to {
          -webkit-transform: scaleY(0.4);
          transform: scaleY(0.4);
        }
        20% {
          -webkit-transform: scaleY(1);
          transform: scaleY(1);
        }
      }
      @-moz-keyframes line-scale {
        0%,
        40%,
        to {
          -webkit-transform: scaleY(0.4);
          -moz-transform: scaleY(0.4);
          transform: scaleY(0.4);
        }
        20% {
          -webkit-transform: scaleY(1);
          -moz-transform: scaleY(1);
          transform: scaleY(1);
        }
      }
      @-o-keyframes line-scale {
        0%,
        40%,
        to {
          -webkit-transform: scaleY(0.4);
          -o-transform: scaleY(0.4);
          transform: scaleY(0.4);
        }
        20% {
          -webkit-transform: scaleY(1);
          -o-transform: scaleY(1);
          transform: scaleY(1);
        }
      }
      .mainnav {
        position: relative;
        width: 100%;
        height: 0.74rem;
        z-index: 99;
        display: flex;
      }
      .mainnav > .mainnav-content {
        position: relative;
        display: flex;
        width: 100%;
        height: 0.74rem;
        overflow: hidden;
      }
      .mainnav .partnav {
        height: 0.74rem;
        position: relative;
        overflow: hidden;
        flex: 1;
        background: #fff;
        color: #333;
      }
      .mainnav .partnavlist {
        position: absolute;
        left: 0;
        -webkit-overflow-scrolling: touch;
        background: #fff;
      }
      .mainnav .partnavlist ul {
        position: relative;
        white-space: nowrap;
        font-size: 0;
      }
      .mainnav .partnavlist ul li {
        padding: 0 0.15rem;
        height: 0.74rem;
        line-height: 0.76rem;
        position: relative;
        display: inline-block;
        color: #333;
        font-size: 0.26rem;
        text-align: center;
        text-decoration: none;
        cursor: pointer;
        background: #fff;
        user-select: none;
      }
      .mainnav .partnavlist ul li:nth-child(1):before {
        content: initial;
      }
      .mainnav .partnavlist ul li.active {
        font-weight: 500;
        color: #d00921;
      }
      .mainnav .partnavlist ul li.active i {
        display: inline-block;
        width: 0.22rem;
        transform: translateY(0.04rem);
      }
      .mainnav .partnavlist ul li.active i svg .st0 {
        fill-rule: evenodd;
        clip-rule: evenodd;
        fill: currentColor;
      }
      .mainnav .partnavlist ul li.active i svg .st1 {
        fill: currentColor;
      }
      .mainnav .partnavlist.goods-nav-list ul li {
        width: 1.28rem;
      }
      .mainnav .morenav {
        position: relative;
        width: 0.8rem;
        height: 0.74rem;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        background: #fff;
      }
      .mainnav .morenav i {
        font-size: 0.26rem;
        color: #333;
      }
      .mainnav .opennav {
        position: absolute;
        top: 0.74rem;
        left: 0;
        width: 100%;
        background: #fff;
      }
      .mainnav .opennav ul {
        display: flex;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
        justify-content: space-around;
        -webkit-box-shadow: 0 8px 14px -7px rgba(0, 0, 0, 0.1);
        box-shadow: 0 8px 14px -7px rgba(0, 0, 0, 0.1);
        padding: 0.05rem 0.15rem;
        border-top: 0.0133rem solid #f5f5f5;
      }
      .mainnav .opennav ul li {
        font-size: 0.22rem;
        letter-spacing: 0.02rem;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 0.08rem;
        width: 1.64rem;
        height: 0.54rem;
        padding: 0.09rem 0;
        margin: 0.15rem 0.08rem;
        background: #f5f5f5;
        color: #666;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        -webkit-user-select: none;
        user-select: none;
      }
      .mainnav .opennav ul li.active {
        color: #fff;
        background: #5a4af4;
      }
      .mainnav .opennav ul li.active img {
        width: 0.2667rem;
      }
      .mainnav-fixed {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        border-radius: 0;
        z-index: 199;
        height: 0.74rem;
        background: #fff;
      }
      .mainnav-fixed .mainnav {
        width: 100%;
        width: 100%;
        margin: 0 auto;
      }
      .mainnav-fixed .opennav ul {
        justify-content: initial;
      }
      .mainnav-fixed + *:before {
        display: block;
        height: 0.74rem;
        content: "";
      }
      .goods-card {
        width: 7.02rem;
        background: #fff;
        display: flex;
        align-items: center;
        padding: 0.2rem;
        margin-bottom: 0.2rem;
        border-radius: 0.2rem;
        box-sizing: border-box;
        user-select: none;
      }
      .goods-card > img {
        width: 2.3rem;
        height: 2.3rem;
        border-radius: 0.1rem;
        filter: contrast(97%);
      }
      .goods-card .detail {
        position: relative;
        width: calc(100% - 2.3rem);
        padding-left: 0.2rem;
        box-sizing: border-box;
      }
      .goods-card .detail .ticket {
        display: inline-flex;
        align-items: center;
        height: 0.38rem;
        padding: 1px 1px 1px 0;
        box-sizing: border-box;
        background: linear-gradient(0deg, #ff753c, #ff4b42);
        border-radius: 2px;
        font-size: 0;
        font-family: Microsoft YaHei;
      }
      .goods-card .detail .ticket .name,
      .goods-card .detail .ticket .value {
        padding: 0 0.05rem;
        font-size: 0.25rem;
        font-family: Microsoft YaHei;
      }
      .goods-card .detail .ticket .name {
        line-height: 1em;
        font-weight: 300;
        color: #fff;
      }
      .goods-card .detail .ticket .value {
        display: flex;
        align-items: center;
        height: 100%;
        font-weight: 400;
        color: #ff4d42;
        background: #fff;
      }
      .goods-card .detail .price {
        font-size: 0.24rem;
        font-family: PingFang SC;
        font-weight: bold;
        line-height: 1em;
      }
      .goods-card .detail .price.has-share {
        padding-right: 0.5rem;
      }
      .goods-card .detail .price .discount {
        color: #f23015;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .goods-card .detail .price .discount strong {
        font-size: 0.44rem;
        line-height: 1em;
      }
      .goods-card .detail .price .price-bottom {
        margin-top: 0.1rem;
      }
      .goods-card .detail .price .price-bottom > div {
        display: inline-block;
        vertical-align: top;
      }
      .goods-card .detail .price .price-bottom .origin {
        font-weight: 500;
        text-decoration: line-through;
        color: #b9b9b9;
      }
      .goods-card .detail .price .price-bottom .sales {
        float: right;
        color: #a09f9f;
      }
      .goods-card .detail .price .price-bottom .sales .name {
        margin-right: 2px;
      }
      .goods-card .detail .icon {
        user-select: none;
        height: 0.3rem;
        width: auto;
        margin-right: 2px;
      }
      .goods-card .detail .title {
        display: flex;
        align-items: center;
        font-size: 0.3rem;
        font-weight: 500;
        color: #000;
        margin: 0;
      }
      .goods-card .detail .title span {
        flex: 1;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
      .goods-card .detail .tm-icons + div {
        margin-top: 0;
      }
      .goods-card .detail .center {
        margin: 0.2rem 0;
      }
      .goods-card .detail .share {
        position: absolute;
        top: 0.8rem;
        right: -0.2rem;
        width: 1.03rem;
        font-size: 0.26rem;
        font-weight: 500;
        padding-left: 0.1rem;
        border-radius: 0.28rem 0 0 0.28rem;
        cursor: pointer;
        box-sizing: border-box;
        -webkit-user-select: none;
        user-select: none;
        z-index: 1;
      }
      .goods-card .detail .share {
        height: 0.56rem;
        color: #f23015;
        background: #ffefed;
        display: flex;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-align-items: center;
        align-items: center;
      }
      .goods-card .detail .footer {
        display: flex;
        -webkit-justify-content: space-between;
        justify-content: space-between;
        -webkit-align-items: flex-end;
        align-items: flex-end;
      }
      .goods-card .detail .footer .operation {
        width: 1.87rem;
        height: 0.64rem;
        font-size: 0.28rem;
        font-weight: 700;
        color: #bd1d14;
        background: linear-gradient(0deg, #ffcd62, #fde989);
        display: flex;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-align-items: center;
        align-items: center;
        border-radius: 0.36rem;
        cursor: pointer;
      }
      .goods-card .detail .footer .operation.sell-out {
        background: #eee;
        color: #ccc;
        cursor: default;
      }
      .goods-card-loading {
        text-align: center;
        padding: 0.4rem 0 0.4rem;
        color: #fff;
      }
      .goods-card-loading span {
        font-size: 0.24rem;
        color: currentColor;
        letter-spacing: 0.01rem;
      }
      .free-share {
        position: fixed;
        bottom: 0;
        width: 7.5rem;
        height: 1.76rem;
        background: linear-gradient(
          180deg,
          rgba(255, 255, 255, 0),
          #d00921 50%
        );
        padding: 0.32rem 0.24rem;
        box-sizing: border-box;
        z-index: 100;
        cursor: pointer;
      }
      .free-share #share_href {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 6.22rem;
        height: 0.9rem;
        margin: auto;
        background: linear-gradient(180deg, #fff8e6, #fdeabf);
        border-radius: 0.45rem;
        text-align: center;
        color: #d00921;
        font-size: 0.324rem;
        line-height: 1em;
      }
      .free-share #share_href #svg-icon {
        margin-top: 0.05rem;
        margin-right: 0.1rem;
        height: 1em;
      }
      .free-share #share_href #svg-icon .cls-1,
      .free-share #share_href #svg-icon .cls-2 {
        fill: none;
        stroke: currentColor;
        stroke-linejoin: round;
        stroke-width: 2px;
      }
      .free-share #share_href #svg-icon .cls-2 {
        stroke-linecap: round;
      }
      .free-loading {
        display: flex;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-align-items: center;
        align-items: center;
        -webkit-flex-direction: column;
        flex-direction: column;
        padding-top: 0.6rem;
      }
      .free-loading > p {
        font-size: 0.3rem;
        color: #fff;
        letter-spacing: 0.01rem;
        margin: 0.2rem 0 0;
      }
      .free-loading .la-line-scale {
        width: 1.6rem;
        height: 1.28rem;
        display: block;
        font-size: 0;
        color: #d00921;
      }
      .free-loading .la-line-scale > div {
        display: inline-block;
        float: none;
        background-color: currentColor;
        border: 0 solid;
        width: 0.16rem;
        height: 1.28rem;
        margin: 0 0.08rem;
        border-radius: 0;
        -webkit-animation: line-scale 1.2s ease infinite;
        -moz-animation: line-scale 1.2s infinite ease;
        -o-animation: line-scale 1.2s infinite ease;
        animation: line-scale 1.2s ease infinite;
      }
      .free-loading .la-line-scale > div:first-child {
        -webkit-animation-delay: -1.2s;
        -moz-animation-delay: -1.2s;
        -o-animation-delay: -1.2s;
        animation-delay: -1.2s;
      }
      .free-loading .la-line-scale > div:nth-child(2) {
        -webkit-animation-delay: -1.1s;
        -moz-animation-delay: -1.1s;
        -o-animation-delay: -1.1s;
        animation-delay: -1.1s;
      }
      .free-loading .la-line-scale > div:nth-child(3) {
        -webkit-animation-delay: -1s;
        -moz-animation-delay: -1s;
        -o-animation-delay: -1s;
        animation-delay: -1s;
      }
      .free-loading .la-line-scale > div:nth-child(4) {
        -webkit-animation-delay: -0.9s;
        -moz-animation-delay: -0.9s;
        -o-animation-delay: -0.9s;
        animation-delay: -0.9s;
      }
      .free-loading .la-line-scale > div:nth-child(5) {
        -webkit-animation-delay: -0.8s;
        -moz-animation-delay: -0.8s;
        -o-animation-delay: -0.8s;
        animation-delay: -0.8s;
      }
      .free-container {
        min-height: 100vh;
        max-width: 7.5rem;
        background: #d00921;
        padding-bottom: 1.76rem;
        margin: 0 auto;
        box-sizing: border-box;
      }
      .free-banner {
        width: 7.5rem;
        min-height: 3.4rem;
        display: block;
      }
      .rule {
        position: relative;
        display: block;
        width: 7.02rem;
        height: 2.61rem;
        padding: 0.75rem 0.1rem 0.1rem 0.28rem;
        box-sizing: border-box;
        margin: -0.5rem auto 0;
        background: url("http://img-haodanku-com.cdn.fudaiapp.com/FigJSqLrLoDa8hvdpIcEjKncfZzX");
        background-size: cover;
      }
      .rule .rule-box {
        height: 100%;
        overflow: auto;
      }
      .rule p {
        margin: 0;
        font-size: 0.22rem;
        font-family: PingFang SC;
        font-weight: 500;
        line-height: 0.4rem;
        color: #333;
      }
      .free-lists {
        width: 7.02rem;
        margin: 0.28rem auto 0;
        box-sizing: border-box;
        border-radius: 0 0 0.23rem 0.23rem;
      }
      @-moz-keyframes turn {
        0% {
          -webkit-transform: rotate(0);
          transform: rotate(0);
        }
        to {
          -webkit-transform: rotate(1turn);
          transform: rotate(1turn);
        }
      }
      @-webkit-keyframes turn {
        0% {
          -webkit-transform: rotate(0);
          transform: rotate(0);
        }
        to {
          -webkit-transform: rotate(1turn);
          transform: rotate(1turn);
        }
      }
      @-o-keyframes turn {
        0% {
          -webkit-transform: rotate(0);
          transform: rotate(0);
        }
        to {
          -webkit-transform: rotate(1turn);
          transform: rotate(1turn);
        }
      }
      @keyframes turn {
        0% {
          -webkit-transform: rotate(0);
          transform: rotate(0);
        }
        to {
          -webkit-transform: rotate(1turn);
          transform: rotate(1turn);
        }
      }
      @-moz-keyframes line-scale {
        0%,
        40%,
        to {
          -webkit-transform: scaleY(0.4);
          -moz-transform: scaleY(0.4);
          -o-transform: scaleY(0.4);
          transform: scaleY(0.4);
        }
        20% {
          -webkit-transform: scaleY(1);
          -moz-transform: scaleY(1);
          -o-transform: scaleY(1);
          transform: scaleY(1);
        }
      }
      @-webkit-keyframes line-scale {
        0%,
        40%,
        to {
          -webkit-transform: scaleY(0.4);
          -moz-transform: scaleY(0.4);
          -o-transform: scaleY(0.4);
          transform: scaleY(0.4);
        }
        20% {
          -webkit-transform: scaleY(1);
          -moz-transform: scaleY(1);
          -o-transform: scaleY(1);
          transform: scaleY(1);
        }
      }
      @-o-keyframes line-scale {
        0%,
        40%,
        to {
          -webkit-transform: scaleY(0.4);
          -moz-transform: scaleY(0.4);
          -o-transform: scaleY(0.4);
          transform: scaleY(0.4);
        }
        20% {
          -webkit-transform: scaleY(1);
          -moz-transform: scaleY(1);
          -o-transform: scaleY(1);
          transform: scaleY(1);
        }
      }
      @keyframes line-scale {
        0%,
        40%,
        to {
          -webkit-transform: scaleY(0.4);
          -moz-transform: scaleY(0.4);
          -o-transform: scaleY(0.4);
          transform: scaleY(0.4);
        }
        20% {
          -webkit-transform: scaleY(1);
          -moz-transform: scaleY(1);
          -o-transform: scaleY(1);
          transform: scaleY(1);
        }
      }
      .free-container {
        position: relative;
        font-family: PingFang SC;
      }
      .free-container .banner {
        height: 4.6rem;
      }
      .free-container .goods-card.heji .center {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 0.1rem 0 0.45rem;
      }
      .free-container .goods-card.heji .center .month-sale {
        font-size: 0.2rem;
        font-family: PingFang SC;
        font-weight: 400;
        color: #999;
      }
      .free-container .goods-card.heji .today-sale {
        width: 2.56rem;
        height: 0.4rem;
        background: linear-gradient(90deg, #ffeeeb 0%, #fff 100%);
        border-radius: 0.2rem;
        font-size: 0.22rem;
        font-family: PingFang SC;
        font-weight: 500;
        color: #b0361e;
        line-height: 0.4rem;
        text-indent: 0.1rem;
      }
      .free-container .goods-card.heji .today-sale strong {
        font-size: 0.3rem;
        color: #f23015;
      }
      .free-container .goods-card.heji .footer {
        display: block;
      }
      .free-container .goods-card.heji .footer .price {
        display: flex;
        align-items: baseline;
        margin-bottom: 0.2rem;
      }
      .free-container .goods-card.heji .footer .price > div {
        font-size: 0.22rem;
        font-family: PingFang SC;
        font-weight: 500;
        width: auto;
      }
      .free-container .goods-card.heji .footer .discount {
        margin-right: 0.1rem;
        color: #ef2735;
      }
      .free-container .goods-card.heji .footer .discount strong {
        font-size: 0.3rem;
        color: #ef2735;
      }
      .free-container .goods-card.heji .footer .origin {
        text-decoration: line-through;
        color: #b9b9b9;
      }
      .free-container .goods-card.heji .btn-block {
        position: absolute;
        right: 0;
        bottom: 0;
      }
      .free-container .goods-card.heji .btn-block > div {
        width: 1.3rem;
        height: 0.55rem;
        box-sizing: border-box;
        line-height: 0.55rem;
        margin-right: -0.2rem;
        font-size: 0.24rem;
        border-radius: 0.28rem 0 0 0.28rem;
        text-align: center;
      }
      .free-container .goods-card.heji .btn-block .btn-share {
        background: #fff9f3;
        border: 1px dashed #f5a15c;
        border-right: 0;
        color: #ff6728;
      }
      .free-container .goods-card.heji .btn-block .btn-order {
        margin-top: 0.07rem;
        background: linear-gradient(90deg, #fe3a3f 0%, #faa450 100%);
        box-shadow: 0 0.05rem 0.1rem 0 rgba(215, 21, 55, 0.2);
        color: #fff;
      }
      .free-container .free-lists {
        margin-top: 0;
      }
      .free-container .free-loading .la-line-scale {
        color: #fff;
      }
      .free-container .second-nav {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 0.7rem;
      }
      .free-container .second-nav.fixed {
        position: fixed;
        z-index: 10;
        top: -2px;
        left: 0;
        width: 100%;
        background: #d00921;
      }
      .free-container .second-nav.fixed ~ div.free-lists {
        margin-top: 0.7rem;
      }
      .free-container .second-nav li {
        flex: 1;
        position: relative;
        font-size: 0.26rem;
        font-family: PingFang SC;
        font-weight: 500;
        color: #ffa975;
        text-align: center;
      }
      .free-container .second-nav li .iconfont {
        display: inline-block;
        vertical-align: middle;
        font-size: 0.16rem;
        margin-left: 1em;
        transition: transform 0.25s;
      }
      .free-container .second-nav li .iconfont.up {
        transform: rotate(180deg);
      }
      .free-container .second-nav li .all-icon {
        position: relative;
        display: inline-block;
        margin-left: 0.05rem;
        font-size: 0;
      }
      .free-container .second-nav li .all-icon .left {
        margin-right: 1px;
      }
      .free-container .second-nav li .all-icon .left,
      .free-container .second-nav li .all-icon .right {
        display: inline-block;
      }
      .free-container .second-nav li .all-icon .left:after,
      .free-container .second-nav li .all-icon .right:after,
      .free-container .second-nav li .all-icon .left:before,
      .free-container .second-nav li .all-icon .right:before {
        display: block;
        padding: 1px;
        border: 1px solid currentColor;
        content: "";
      }
      .free-container .second-nav li .all-icon .left:after,
      .free-container .second-nav li .all-icon .right:after {
        margin-top: 1px;
      }
      .free-container .second-nav li.active {
        color: #fff;
      }
      .free-container .second-nav li:after {
        position: absolute;
        right: 0;
        top: 50%;
        display: block;
        height: 0.28rem;
        width: 1px;
        transform: translateY(-50%);
        opacity: 0.2;
        background: #ffa975;
        content: "";
      }
      .free-container .second-nav li:last-child:after {
        display: none;
      }
      .free-container .nav-select {
        position: absolute;
        z-index: 100;
        margin-left: 0.25rem;
        width: 7rem;
        box-sizing: border-box;
        padding: 0 0.2rem;
        background: #fff;
        box-shadow: 0 0.06rem 0.18rem 0 rgba(0, 0, 0, 0.3);
        border-radius: 0.16rem;
      }
      .free-container .nav-select.fixed {
        position: fixed;
        top: 0.6rem;
        width: 100%;
        left: 0;
        margin-left: 0;
        text-align: center;
      }
      .free-container .nav-select:before {
        position: absolute;
        display: block;
        bottom: 100%;
        right: 14.5%;
        border: 0.1rem solid rgba(0, 0, 0, 0);
        border-bottom-color: #fff;
        content: "";
      }
      .free-container .nav-select li {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin: 0.2rem;
        box-sizing: border-box;
        width: 1.8rem;
        height: 0.64rem;
        background: #f7f7f7;
        border-radius: 0.32rem;
        font-size: 0.26rem;
        font-family: PingFang SC;
        font-weight: 500;
        color: #333;
        text-align: center;
      }
      .free-container .nav-select li.active {
        border: 2px solid #f0431a;
        color: #f0431a;
      }</style><template id="c-loading">
      <!-- 加载效果 -->
      <div class="free-loading">
        <div class="la-line-scale">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
        <p>数据加载中...</p>
      </div>
    </template>
    <script>
      Vue.component("loading", {
        template: "#c-loading",
      });
    </script>
  <!--  <template id="c-share">
      <div class="free-share">
        <div id="share_href" v-on:click="handleShare">
          <i>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              id="svg-icon"
              data-name="图层 1"
              viewBox="0 0 18 19.11"
            >
              <title>分享</title>
              <path
                class="cls-1"
                d="M17.5,8A2.5,2.5,0,1,0,15,5.5,2.5,2.5,0,0,0,17.5,8Z"
                transform="translate(-3 -2)"
              />
              <path
                class="cls-1"
                d="M6.5,14.5A2.5,2.5,0,1,0,4,12,2.5,2.5,0,0,0,6.5,14.5Z"
                transform="translate(-3 -2)"
              />
              <path
                class="cls-2"
                d="M15,6.79,8.67,10.62"
                transform="translate(-3 -2)"
              />
              <path
                class="cls-2"
                d="M8.67,13.28,13.27,16"
                transform="translate(-3 -2)"
              />
              <path
                class="cls-1"
                d="M15.77,15.11a2.5,2.5,0,1,1-2.5,2.5A2.5,2.5,0,0,1,15.77,15.11Z"
                transform="translate(-3 -2)"
              />
            </svg>
          </i>
          <span>分享好友</span>
        </div>
      </div>
    </template>-->
    <script>
      Vue.component("share", {
        template: "#c-share",
        methods: {
          handleShare: function () {
            this.$emit("share");
          },
        },
      });
    </script>
    <template id="c-list-item">
      <div class="goods-card heji">
        <img v-lazy="item.itempic" v-if="item.itempic" />
        <img
          src="http://img.bc.fqapps.com/fudai13cae4ae6ef16739ed3b100a2ec39e97.gif"
          alt=""
          v-else
        />
        <div class="detail">
          <div class="title">
            <img class="icon" :src="iconUrl" alt="" />
            <span>{{ item.goodsnameshort || item.goodsname }}</span>
          </div>
          <div class="center">
            <div class="today-sale">
              <i class="iconfont hdk-huo"></i>近2小时销量{{item.itemsale2}}
            </div>
            <div class="month-sale">月销 {{getMoneyStr(item.itemsale)}}</div>
          </div>
          <div class="footer">
            <div class="price" v-bind:class="{'has-share': showShare}">
              <div class="discount">
                券后价￥<strong>{{ Number(item.itemendprice) }}</strong>
              </div>
              <div class="origin">￥{{ item.itemprice }}</div>
            </div>
            <div class="ticket">
              <span class="name">券</span
              ><span class="value">￥{{ item.couponmoney }}</span>
            </div>
          </div>
          <div class="btn-block">
            <div class="btn-share">
              <span class="operation" v-on:click="share(item)">分享</span>
            </div>
            <div class="btn-order">
              <span v-if="item.stock == 0" class="operation sell-out"
                >已抢完</span
              >
              <span v-else-if="item.stock == -1" class="operation sell-out"
                >未开始</span
              >
              <span v-else class="operation" v-on:click="buy(item)"
                >立即下单</span
              >
            </div>
          </div>
        </div>
      </div>
    </template>
    <script>
      Vue.component("list-item", {
        template: "#c-list-item",
        props: {
          item: Object,
          type: {
            type: String,
            default: "tb", // tb || jd
          },
          showShare: {
            type: Boolean,
            default: false,
          },
        },
        computed: {
          iconUrl: function () {
            return this.$parent.itemIcon;
          },
        },
        methods: {
          buy: function (item) {
            this.$emit("buy", item);
          },
          share: function (item) {
            this.$emit("share", item);
          },
          getMoneyStr: function (num) {
            var w = 10000;
            if (num < w) return num;
            return (num / w).toFixed(2) + "万";
          },
        },
      });
    </script>
    <div class="free-container" id="free_app" v-cloak>
      <div class="free-mail">
        <img class="free-banner" v-bind:src="banner" alt="" />
      </div>
      <ul class="second-nav" ref="nav" v-bind:class="{fixed:navFixed}">
        <li
          v-for="(item, index) in switchData.list"
          v-bind:class="{active: index === switchData.activeIndex}"
          v-on:click.stop="handleNavBar(item,index)"
        >
          <span v-if="item.type === 'sort'">{{item.name}}</span
          ><span v-else
            >{{switchData.options[switchData.optionActiveIndex].label}}</span
          ><i
            class="iconfont hdk-paixu2 arrow"
            v-if="item.isReverse !== undefined"
            :class="{up:item.isReverse}"
          ></i>
          <div class="all-icon" v-else-if="item.type === 'select'">
            <div class="left"></div>
            <div class="right"></div>
          </div>
        </li>
      </ul>
      <!-- 商品类型-->
      <ul
        class="nav-select"
        v-show="switchData.showSelect"
        v-bind:class="{fixed:navFixed}"
        v-on:click.stop
      >
        <li
          v-for="(it, index) in switchData.options"
          v-bind:class="{active:index === switchData.optionActiveIndex}"
          v-on:click="clickNavSelect(it, index)"
        >
          <span>{{it.label}}</span>
        </li>
      </ul>
      <div class="free-lists">
        <template v-if="listData.list.length || listData.finished"
          ><list-item
            v-for="(item,index) in listData.list"
            v-bind:item="item"
            type="jd"
            v-bind:key="index"
            v-on:buy="onClickOrder"
            v-on:share="onClickShare"
          ></list-item
          ><!-- 底部提示 -->
          <div class="goods-card-loading">
            <span v-if="listData.finished">已经加载到底啦~</span
            ><span v-else>数据正在赶来的路上...</span>
          </div></template
        ><!-- 加载效果 --><loading
          v-else-if="!listData.list.length && listData.loading"
        ></loading>
      </div>
      <share v-on:share="handleShare"></share>
    </div>
    <script>
      var switchDataList = [
        {
          type: "sort",
          name: "热销",
          value: "3",
        },
        {
          type: "sort",
          name: "券后价",
          value: "5",
          isReverse: false,
          reverseValue: "4",
        },
        {
          type: "select",
          name: "全部",
          value: navList[0].value,
          reverseValue: "3",
        },
      ];
      var indexMixins = {
        mixins: [CommonMixin],
        data: function () {
          return {
            switchData: {
              options: navList,
              list: switchDataList,
              form: {
                order: switchDataList[0].value, // 排序
                cat_id: navList[0].value, // 类目
              },
              activeIndex: 0,
              optionActiveIndex: 0,
              showSelect: false,
            },
            rules: [],
            postImgUrl: "",
            showPostModal: false,
            navFixed: false,
          };
        },
        mounted: function () {
          var that = this;
          setTimeout(function () {
            isFixed(that.$refs.nav, function (fixed) {
              that.navFixed = fixed;
            });
          }, 500);
        },
        methods: {
          cancelWinClick: function () {
            this.clickWinHandle &&
              window.removeEventListener("click", this.clickWinHandle);
          },
          /**
           * 切换导航栏
           */
          handleNavBar: function (item, index) {
            if (item.type === "sort") {
              if (this.switchData.activeIndex === index) {
                if (item.isReverse === undefined) return;
                item.isReverse = !item.isReverse;
              } else {
                this.switchData.activeIndex = index;
              }
              this.switchData.form.order = item.isReverse
                ? item.reverseValue
                : item.value;
              this.resetListData();
              this.getListData();
              return;
            }
            this.switchData.showSelect = !this.switchData.showSelect;
            var that = this;
            if (!this.switchData.showSelect) {
              that.cancelWinClick();
              return;
            }
            this.$nextTick(function () {
              window.addEventListener(
                "click",
                (that.clickWinHandle = function () {
                  console.log("cccccccccc");
                  that.switchData.showSelect = false;
                  that.cancelWinClick();
                })
              );
            });
          },
          /**
           * 获取商品数据
           */
          getListData: function () {
            if (this.listData.loading || this.listData.finished) return;
            var that = this;
            that.listData.loading = true;
            var data = Object.assign(
              {},
              this.getListDataParams(),
              this.switchData.form
            );
            $.ajax({
              url: this.vmHttp + this.getListDataUrl(),
              type: "GET",
              data: data,
              dataType: "json",
            })
              .done(function (res) {
                if (Number(res.code) !== 200) {
                  that.listData.finished = true;
                  that.listData.loading = false;
                  toast(res.msg);
                  return;
                }
                setTimeout(function () {
                  that.listData.finished = !Boolean(
                    res.data && res.data.length
                  );
                  that.listData.list = that.listData.list.concat(res.data);
                  that.listData.min_id = res.min_id;
                  that.listData.loading = false;
                }, 200);
              })
              .fail(function (res) {
                toast("网络错误");
                that.listData.finished = true;
                that.listData.loading = false;
              });
          },
          /**
           * 商品转链
           */
          handleGoodsTransfer: function (item, source, isShare) {
            if (item.stock == 0) {
              toast("已抢完");
              return;
            } else if (item.stock == -1) {
              toast("活动未开始");
              return;
            }
            var obj = { short_url: "链接" };
            var successMsg = "复制" + obj[source] + "成功";
            if (item[source]) {
              isShare
                ? copyText(item[source], successMsg)
                : window.open(item[source], "_blank");
              return;
            }
            var that = this;
            $.ajax({
              url: that.vmHttp + this.getTransferUrl(),
              type: "POST",
              data: this.getTransferParams(item),
              dataType: "json",
              async: false,
            })
              .done(function (res) {
                if (Number(res.code) !== 200) {
                  toast(res.msg);
                  return;
                }
                for (var k in obj) {
                  item[k] = res.data[k];
                }
                if (!item[source]) {
                  toast("未获取到链接");
                  return;
                }
                isShare
                  ? copyText(item[source], successMsg)
                  : window.jsAndroid.toPdd(item[source]);
                  // : window.open(item[source], "_blank");
              })
              .fail(function () {
                toast("获取链接失败");
              });
          },
          onClickOrder: function (item) {
            this.handleGoodsTransfer(item, "short_url");
          },
          onClickShare: function (item) {
            this.handleGoodsTransfer(item, "short_url", true);
          },

          clickNavSelect: function (item, index) {
            this.switchData.optionActiveIndex = index;
            this.switchData.form.cat_id = item.value;
            this.switchData.showSelect = false;
            this.cancelWinClick();
            this.resetListData();
            this.getListData();
          },
        },
      };
    </script>
    <script>
      var pddMixins = {
        mixins: [indexMixins],
        data: function () {
          return {
            banner:
              "http://img-haodanku-com.cdn.fudaiapp.com/FmQ1zEdjeASccZLG1-Fsm4zLD9D9",
            itemIcon:
              "http://img-haodanku-com.cdn.fudaiapp.com/Fpjf7JUJTCWNo7zm0RnZkLn6YQBq",
          };
        },
        methods: {
          getListDataUrl: function () {
            return "://v2.api.haodanku.com/get_pdd_itemlist";
          },
          getTransferUrl: function () {
            return "://v2.api.haodanku.com/get_pdditems_link";
          },
        },
      };
    </script>
    <script>
      new Vue({
        mixins: [pddMixins],
        methods: {
          getListDataParams: function () {
            return {
              apikey: "shunziyouxuan", // 必填
              min_id: this.listData.min_id,
              order: this.switchData.selected,
            };
          },
          getTransferParams: function (item) {
            return {
              apikey: "shunziyouxuan", // 必填
              pid: "8147037_188271809", // 必填
              goods_sign: item.goods_sign,
              goods_id: item.goods_id,
              domain: location.host,
            };
          },
        },
      });
    </script>
  </body>
</html>
